<template>
  <el-row>
    <el-form-item label="控件标题">
      <el-input v-model="activeData.__config__.label" placeholder="请输入控件标题" />
    </el-form-item>
    <el-form-item label="占位提示">
      <el-input v-model="activeData.placeholder" placeholder="请输入占位提示" />
    </el-form-item>
    <el-form-item label="默认值">
      <el-input-number v-model="activeData.__config__.defaultValue" placeholder="默认值"
        :min="activeData.min" :max="activeData.max" :step="activeData.step"
        :precision="activeData.precision" controls-position="right" />
    </el-form-item>
    <el-form-item label="最小值">
      <el-input-number v-model="activeData.__config__.min" placeholder="最小值" controls-position="right" />
    </el-form-item>
    <el-form-item label="最大值">
      <el-input-number v-model="activeData.__config__.max" placeholder="最大值" controls-position="right" />
    </el-form-item>
    <el-form-item label="步长">
      <el-input-number v-model="activeData.__config__.step" placeholder="步数" :min="1"
        controls-position="right" />
    </el-form-item>
    <el-form-item label="精度">
      <el-input-number v-model="activeData.__config__.precision" :min="0" placeholder="精度"
        controls-position="right" />
    </el-form-item>
    <el-form-item label="按钮位置">
      <el-radio-group v-model="activeData.__config__.controlsPosition">
        <el-radio-button label="">默认</el-radio-button>
        <el-radio-button label="right">右侧</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <!-- <el-form-item label="严格步数">
      <el-switch v-model="activeData['step-strictly']" />
    </el-form-item> -->
    <el-form-item label="数据格式" >
      <el-select v-model="activeData.__config__.formatType" placeholder="请选择数据格式" clearable
        @change="onChange">
        <el-option v-for="item in formats" :key="item.id"
          :label="item.label"
          :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="中文金额"  v-if="china">
      <el-switch v-model="activeData.__config__.showChinese"/>
    </el-form-item>
    <el-form-item label="币种" v-if="formatShow">
      <el-select v-model="activeData.__config__.currency" placeholder="请选择币种" clearable
        @change="onChange">
        <el-option v-for="item in currencys" :key="item.id"
          :label="item.label"
          :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="单位">
      <el-input v-model="activeData.__config__.unit" placeholder="请输入单位" />
    </el-form-item>
    <el-form-item label="是否禁用">
      <el-switch v-model="activeData.__config__.disabled" />
    </el-form-item>
    <el-form-item label="是否必填">
      <el-switch v-model="activeData.__config__.required" />
    </el-form-item>
    <el-form-item label="是否隐藏">
      <el-switch v-model="activeData.__config__.noShow" />
    </el-form-item>
  </el-row>
</template>
<script>
import comMixin from './mixin';
export default {
  props: ['activeData'],
  mixins: [comMixin],
  data() {
    return {
      formats:[
        {
          id:0,
          label:'无'
        } ,
        {
          id:1,
          label:'金额'
        } ,
        {
          id:2,
          label:'百分比'
        }
      ],
      currencys:[
        {
          id: '',
          label:'无'
        } ,
        {
          id:'¥',
          label:'人民币'
        } ,
        {
          id:'$',
          label:'美金'
        }
      ],
      formatShow:true,
      china:true
    }
  },
  created() { 
    this.$nextTick(()=>{
      this.china = this.activeData.__config__.formatType===1
    })
  },
  methods: {
    onChange(){
      this.china = this.activeData.__config__.formatType === 1
      this.formatShow = this.activeData.__config__.formatType === 1
      debugger
      this.$set(this.activeData.__config__, 'showChinese', this.china)
      this.$set(this.activeData.__config__, 'currency', this.formatShow?this.activeData.__config__.currency:'')
      this.$set(this.activeData.__config__, 'unit', this.activeData.__config__.formatType===1?'元':'')
    },
    bfbChange(data){

    },
    onConditionListChange(data, item) {
      if (!data || !data[1]) return item.filedLabel = ''
      let labelList = data[1].map(o => o.fullName)
      item.filedLabel = labelList.join(' / ')
    },
  }
}
</script>